<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>遇到你的时间刚刚好</title>
	<!-- jQuery(Bootstrap的JavaScript插件需要引入jQuery，务必在bootstrap.min.js之前引入) -->
	<script type="text/javascript" src="https://suzengxin.github.io/static/jquery-3.5.1.min.js"></script>
	
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" data-integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" data-crossorigin="anonymous">
	
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" data-integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" data-crossorigin="anonymous"></script>
</head>

<style type="text/css">
	body {
		background-color: black;
	}

	.container {
		background-color: #ffe;
	}

	#loveHeart {
		height: 101vh;
	}

	#garden {
		/*position:absolute;*/
	}

	#errorMsg {
		width: 100%;
		text-align: center;
		font-size: 24px;
		position: absolute;
		top: 100px;
		left: 0;
	}

	#words {
		font-family: "sans-serif";
		color: #666;
		font-size: 26px;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 300px;
		display:none;
	}

	#messages {
		/*display:none;*/
	}

	#elapseClock {
		text-align: center;
		font-size: 14px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	#elapseClock .digit {
		font-family: "digit";
		font-size: 42px;
	}

	#loveu {
		padding: 5px;
		font-size: 22px;
		margin-top: 10px;
		margin-right: 10px;
		text-align: right;
		/*display: none;*/
	}

	#loveu .signature {
		margin-top: 10px;
		font-size: 20px;
		font-style: italic;
	}

</style>

<script type="text/javascript">
	function Vector(x, y) {
        this.x = x;
        this.y = y;
    };
	
    Vector.prototype = {
        rotate: function (theta) {
            var x = this.x;
            var y = this.y;
            this.x = Math.cos(theta) * x - Math.sin(theta) * y;
            this.y = Math.sin(theta) * x + Math.cos(theta) * y;
            return this;
        },
        mult: function (f) {
            this.x *= f;
            this.y *= f;
            return this;
        },
        clone: function () {
            return new Vector(this.x, this.y);
        },
        length: function () {
            return Math.sqrt(this.x * this.x + this.y * this.y);
        },
        subtract: function (v) {
            this.x -= v.x;
            this.y -= v.y;
            return this;
        },
        set: function (x, y) {
            this.x = x;
            this.y = y;
            return this;
        }
    };
	
    function Petal(stretchA, stretchB, startAngle, angle, growFactor, bloom) {
        this.stretchA = stretchA;
        this.stretchB = stretchB;
        this.startAngle = startAngle;
        this.angle = angle;
        this.bloom = bloom;
        this.growFactor = growFactor;
        this.r = 1;
        this.isfinished = false;
        //this.tanAngleA = Garden.random(-Garden.degrad(Garden.options.tanAngle), Garden.degrad(Garden.options.tanAngle));
        //this.tanAngleB = Garden.random(-Garden.degrad(Garden.options.tanAngle), Garden.degrad(Garden.options.tanAngle));
    }

    Petal.prototype = {
        draw: function () {
            var ctx = this.bloom.garden.ctx;
            var v1, v2, v3, v4;
            v1 = new Vector(0, this.r).rotate(Garden.degrad(this.startAngle));
            v2 = v1.clone().rotate(Garden.degrad(this.angle));
            v3 = v1.clone().mult(this.stretchA); //.rotate(this.tanAngleA);
            v4 = v2.clone().mult(this.stretchB); //.rotate(this.tanAngleB);
            ctx.strokeStyle = this.bloom.c;
            ctx.beginPath();
            ctx.moveTo(v1.x, v1.y);
            ctx.bezierCurveTo(v3.x, v3.y, v4.x, v4.y, v2.x, v2.y);
            ctx.stroke();
        },
        render: function () {
            if (this.r <= this.bloom.r) {
                this.r += this.growFactor; // / 10;
                this.draw();
            } else {
                this.isfinished = true;
            }
        }
    }

    function Bloom(p, r, c, pc, garden) {
        this.p = p;
        this.r = r;
        this.c = c;
        this.pc = pc;
        this.petals = [];
        this.garden = garden;
        this.init();
        this.garden.addBloom(this);
    }

    Bloom.prototype = {
        draw: function () {
            var p, isfinished = true;
            this.garden.ctx.save();
            this.garden.ctx.translate(this.p.x, this.p.y);
            for (var i = 0; i < this.petals.length; i++) {
                p = this.petals[i];
                p.render();
                isfinished *= p.isfinished;
            }
            this.garden.ctx.restore();
            if (isfinished == true) {
                this.garden.removeBloom(this);
            }
        },
        init: function () {
            var angle = 360 / this.pc;
            var startAngle = Garden.randomInt(0, 90);
            for (var i = 0; i < this.pc; i++) {
                this.petals.push(new Petal(Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max), Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max), startAngle + i * angle, angle, Garden.random(Garden.options.growFactor.min, Garden.options.growFactor.max), this));
            }
        }
    }

    function Garden(ctx, element) {
        this.blooms = [];
        this.element = element;
        this.ctx = ctx;
    }

    Garden.prototype = {
        render: function () {
            for (var i = 0; i < this.blooms.length; i++) {
                this.blooms[i].draw();
            }
        },
        addBloom: function (b) {
            this.blooms.push(b);
        },
        removeBloom: function (b) {
            var bloom;
            for (var i = 0; i < this.blooms.length; i++) {
                bloom = this.blooms[i];
                if (bloom === b) {
                    this.blooms.splice(i, 1);
                    return this;
                }
            }
        },
        createRandomBloom: function (x, y) {
            this.createBloom(x, y, Garden.randomInt(Garden.options.bloomRadius.min, Garden.options.bloomRadius.max), Garden.randomrgba(Garden.options.color.rmin, Garden.options.color.rmax, Garden.options.color.gmin, Garden.options.color.gmax, Garden.options.color.bmin, Garden.options.color.bmax, Garden.options.color.opacity), Garden.randomInt(Garden.options.petalCount.min, Garden.options.petalCount.max));
        },
        createBloom: function (x, y, r, c, pc) {
            new Bloom(new Vector(x, y), r, c, pc, this);
        },
        clear: function () {
            this.blooms = [];
            this.ctx.clearRect(0, 0, this.element.width, this.element.height);
        }
    }

    Garden.options = {
        petalCount: {
            min: 8,
            max: 15
        },
        petalStretch: {
            min: 0.1,
            max: 3
        },
        growFactor: {
            min: 0.1,
            max: 1
        },
        bloomRadius: {
            min: 8,
            max: 10
        },
        density: 10,
        growSpeed: 1000 / 60,
        color: {
			rmin: 128,
			rmax: 255,
			gmin: 0,
			gmax: 128,
			bmin: 0,
			bmax: 128,
            opacity: 0.1
        },
        tanAngle: 60
    };

    Garden.random = function (min, max) {
        return Math.random() * (max - min) + min;
    };

    Garden.randomInt = function (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };

    Garden.circle = 2 * Math.PI;

    Garden.degrad = function (angle) {
        return Garden.circle / 360 * angle;
    };

    Garden.raddeg = function (angle) {
        return angle / Garden.circle * 360;
    };

    Garden.rgba = function (r, g, b, a) {
        return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    };

    Garden.randomrgba = function (rmin, rmax, gmin, gmax, bmin, bmax, a) {
		var r = Math.round(Garden.random(rmin, rmax));
		var g = Math.round(Garden.random(gmin, gmax));
		var b = Math.round(Garden.random(bmin, bmax));
		var limit = 5;
		if (Math.abs(r - g) <= limit && Math.abs(g - b) <= limit && Math.abs(b - r) <= limit) {
			return Garden.rgba(rmin, rmax, gmin, gmax, bmin, bmax, a);
		} else {
			return Garden.rgba(r, g, b, a);
		}
    };
</script>

<body>
	<div class="container">
		<div class="row">
		    <div id="loveHeart" class="col-xs-12">
				<canvas id="garden"></canvas>
				<div id="words">
					<div id="messages">
						标题标题标题标题标题
						<div id="elapseClock"></div>
					</div>
					<div id="loveu">
						标题标题标题标题。<br/>
						<div class="signature"><strong>--</strong> XXX</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	window.onresize = function() {
 		window.location.replace(location.href);
	}

	var offsetX = $("#loveHeart").width() / 2;
	var offsetY = $("#loveHeart").height() / 2 - 55;
	var together = new Date(1995, 10, 01, 23, 10, 10, 10);

	if (!document.createElement('canvas').getContext) {
		var msg = document.createElement("div");
		msg.id = "errorMsg";
		msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; 
		document.body.appendChild(msg);
		document.execCommand("stop");
	} else {
		setTimeout(function () {
			startHeartAnimation();
		}, 500);

		timeElapse(together);
		setInterval(function () {
			timeElapse(together);
		}, 500);
	}

	$(function () {
	    // setup garden
	    $garden = $("#garden");
	    gardenCanvas = $garden[0];
		gardenCanvas.width = $("#loveHeart").width();
	    gardenCanvas.height = $("#loveHeart").height()
	    gardenCtx = gardenCanvas.getContext("2d");
	    gardenCtx.globalCompositeOperation = "lighter";
	    garden = new Garden(gardenCtx, gardenCanvas);

	    // renderLoop
	    setInterval(function () {
	        garden.render();
	    }, Garden.options.growSpeed);
	});

	function getHeartPoint(angle) {
		var t = angle / Math.PI;
		var x = 19.5 * (16 * Math.pow(Math.sin(t), 3));
		var y = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
		return new Array(offsetX + x, offsetY + y);
	}

	function startHeartAnimation() {
		var interval = 50;
		var angle = 10;
		var heart = new Array();
		var animationTimer = setInterval(function () {
			var bloom = getHeartPoint(angle);
			var draw = true;
			for (var i = 0; i < heart.length; i++) {
				var p = heart[i];
				var distance = Math.sqrt(Math.pow(p[0] - bloom[0], 2) + Math.pow(p[1] - bloom[1], 2));
				if (distance < Garden.options.bloomRadius.max * 1.3) {
					draw = false;
					break;
				}
			}
			if (draw) {
				heart.push(bloom);
				garden.createRandomBloom(bloom[0], bloom[1]);
			}
			if (angle >= 30) {
				clearInterval(animationTimer);
				showMessages();
			} else {
				angle += 0.2;
			}
		}, interval);
	}

	(function($) {
		$.fn.typewriter = function() {
			this.each(function() {
				var $ele = $(this), str = $ele.html(), progress = 0;
				$ele.html('');
				var timer = setInterval(function() {
					var current = str.substr(progress, 1);
					if (current == '<') {
						progress = str.indexOf('>', progress) + 1;
					} else {
						progress++;
					}
					$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
					if (progress >= str.length) {
						clearInterval(timer);
					}
				}, 75);
			});
			return this;
		};
	})(jQuery);

	function timeElapse(date){
		var date3 = new Date().getTime() - date.getTime();//时间差的毫秒数

		//计算出相差天数
        var days = Math.floor(date3/(24*3600*1000))

        //计算出小时数 
        var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数
        var hours=Math.floor(leave1/(3600*1000))

        //计算相差分钟数
        var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
        var minutes=Math.floor(leave2/(60*1000))

        //计算相差秒数
        var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
        var seconds=Math.round(leave3/1000)

		var result = "<span class=\"digit\">" + days + "</span> 天 <span class=\"digit\">" + hours + "</span> 时 <span class=\"digit\">" + minutes + "</span> 分 <span class=\"digit\">" + seconds + "</span> 秒"; 
		$("#elapseClock").html(result);
	}

	function showMessages() {
		$('#words').fadeIn(5000, function() {
			showLoveU();
		});
	}

	function showLoveU() {
		$('#loveu').fadeIn(3000);
	}
</script>

</html>